// --------------------------------------------------
// YOUR BEST PRICES		August 2013																
// Global tools and elements
// --------------------------------------------------

// INDEX
// --------------------------------------------------
// VARS
// BACKGROUND
// FONTS
// COLORS
// SPRITE
// OUTLINE
// TRIANGLE
// SHADOW
// BTTNCOMBO
// CATEGORY
// AUTOCOMPLETE
// INPUT FILE


// VARS
@image  :  "../images/";
@FontPath   :  "../font";

// BACKGROUND
.background (@name) {
 	background: url('../images/@{name}') no-repeat;
 }

// FONTS

@font-face {
    font-family: 'Miso-R';
    src: url('@{FontPath}/miso-webfont.eot');
    src: url('@{FontPath}/miso-webfont.eot?#iefix') format('embedded-opentype'),
         url('@{FontPath}/miso-webfont.woff') format('woff'),
         url('@{FontPath}/miso-webfont.ttf') format('truetype'),
         url('@{FontPath}/miso-webfont.svg#misoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Miso-L';
    src: url('@{FontPath}/miso-light-webfont.eot');
    src: url('@{FontPath}/miso-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('@{FontPath}/miso-light-webfont.woff') format('woff'),
         url('@{FontPath}/miso-light-webfont.ttf') format('truetype'),
         url('@{FontPath}/miso-light-webfont.svg#misolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);

.Sea-R {
	font-family: 'Seaweed Script', cursive;
}
.Miso-L {
	font-family: 'Miso-L';
}
.Miso-R {
	font-family: 'Miso-R';
}

.Robo-R {
	font-family: 'Roboto Condensed', sans-serif;
}

.Robo-L {
	font-family: 'Roboto Condensed', sans-serif;	
	font-weight: 300;
}

.Robo-LI {
	font-family: 'Roboto Condensed', sans-serif;	
	font-weight: 300italic;
}

.Robo-B {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
}

// COLORS
@white    : #fff;
@black    : #000;
@gray     : #efefef;

// GRAYs
@first    : #eee;
@second   : #ddd;
@third    : #8d8d8d;
@fourth   : #3c3a3b;
@fifth    : #797979;
@sixth    : #414146;

@product  : #1bbc9b;
@shop     : #f2c26f;
@create   : #c33c39;
@services : #b47bee;
@social   : #83b8e9;
@login    : #3c3a3b;
@blog     : #e65858;
@recycle  : #4f6d22;

@price    : #E61636;

// SPRITE
.sprite (@left, @top, @width, @height) {
    background: url("@{Sprite}") @left @top no-repeat;
    width: @width;
    height: @height;
}

// OUTLINE
button, a, input, .btn-default {
	outline: 0!important;
}

// TRIANGLE
.triangle-top-right (@color) {
	width: 0px;
	height: 0px;
	border-top: 20px solid transparent;
	border-bottom: 0px solid transparent;
	border-right: 26px solid @color;
}
.triangle-bottom-right (@color) {
	width: 0px;
	height: 0px;
	border-top: 0px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 26px solid @color;
}

.triangle-bottom-left (@color) {
	width: 0px;
	height: 0px;
	border-top: 0px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 22px solid @color;
}

// SHADOW
.boxShadow {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

	&.box-shadow{
	    position: relative;
	    float: left;
	    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	
		&:before{
		    content: "";
		    position: absolute;
		    z-index: -2;
		}
	
		&:before{
		    bottom: 15px;
		    left: 10px;
		    width: 50%;
		    height: 20%;
		    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
		    -webkit-transform: rotate(-5deg);
		    -moz-transform: rotate(-5deg);
		    -ms-transform: rotate(-5deg);
		    -o-transform: rotate(-5deg);
		    transform: rotate(-5deg);
		}
	}
}

// BTTNCOMBO
.bttnCombo {
	.inner {
		background: @second;
		width:100%;
		height: 36px;
		padding: 12px 0 0 5px;
		text-align:left;
		span {
			font-size:16px;
		}
		i {
			float: right;
			margin-top: -11px;
			padding: 1px 32px;
			font-size: 2.2em;
			cursor: pointer;
			color: @white; 
			background: @fourth;               
		}
	}
	.comboMenu {
		width: 96%;
		margin:0; 
		padding: 0;
		list-style:none; 
		display:none;
		position: absolute;
		z-index: 9;
		li {
			background:@third;
			padding:8px; 
			text-align: left; 
			border-top: 1px solid @white; 
			font-size:15px; 
			cursor:pointer; 
			&:hover {
				background:@first;
				color: @fourth;
			}
			&:first-child {
				border-top: none;
			}
		}
	}
	&.open 
	{
		span 
		{
			background:none; box-shadow:none; 
			i {
				
			}
		}
		.comboMenu {display:block;} 
	}	            
}
	
// CATEGORY
.category {
	margin:15px 0 15px 100px; 
	&.first {
		margin:15px 0 15px 100px!important;
	}   
}

// AUTOCOMPLETE
.ui-autocomplete {
	padding: 0!important;
	width: 335px!important;
	border-radius: 0!important;
	li {
		background:@product;
		padding:8px; 
		text-align: left; 
		border-top: 1px solid @white; 
		font-size:15px; 
		cursor:pointer; 
		&:hover {
			background:@first;
			color: @fourth;
		}
		&:first-child {
			border-top: none;
		}
		a {
			color: @fourth;
			&:hover {
				color: @fourth;
				background:@second;
				text-decoration: none;
				border-radius: 0!important;
			}
		}
		&.ui-autocomplete-category {
			background:@fourth;
			color: @first;
		}
	}
}


// INPUT FILE
.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 999px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: red;
    cursor: inherit;
    display: block;
}

// PLACE HOLDER
::-webkit-input-placeholder {
   color: @second;
}

:-moz-placeholder { /* Firefox 18- */
   color: @second;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: @second;  
}

:-ms-input-placeholder {  
   color: @second;  
}